$.ajax({
    "url": '../演艺项目json/goodDetail.json',
    // "url": "https://www.fastmock.site/mock/40e170f960701a834866a0bc956002f6/tickets/getAllArts",
    "success": function (data) {
        $.ajax({
            "url": '../演艺项目json/types.json',
            // "url": "https://www.fastmock.site/mock/40e170f960701a834866a0bc956002f6/tickets/getAllTypes",
            "success": function (name) {
                // 整体数据
                var arr = data.goods;
                console.log(arr);

                // 标题和id
                var arr2 = name.types;
                console.log(arr2);

                //热门
                for (var i = 0; i < 6; i++) {
                    var good = arr[i];
                    hotItem(good);
                }

                //大框架
                for (var i = 0; i < 7; i++) {
                    var good = arr[i];
                    var title = arr2[i];

                    addBig(title, good);
                }
                //小内容
                for (let j = 6; j < 10; j++) {
                    var good = arr[j];
                    addMin(good);
                }

                //右边列表
                for (var k = 0; k < 10; k++) {
                    var good = arr[k];

                    addRight(good);
                }
            }
        });
    }
});




function hotItem(e) {
    //热门
    $('.hot-ul').append(`
                <li class="hot-item">
                <a href="./details.html?id=${e.id}">
                <img src="${e.img_src}" alt="" class="hot-img">
                <p class="hot-infor">${e.good_name}</p>
                <p class="hot-price">票价：<span>¥${e.price}</span> 起</p>
                </a>
                </li>
            `)
}

function addBig(t, e) {
    $('.main').append(`
    <div class="main-box">
                <div class="main-left">
                    <span class="main-num">${t.id}F</span> <span class="main-title">${t.name}</span>
                    <div class="main-item">
                        <img src="${e.img_src}" alt="">
                        <ul class="main-ul">
                        </ul>
                    </div>
                </div>
                <div class="main-right">
                <h4>热门${t.name}排行</h4>
                <ul>
                    
                </ul>
                <img src="${e.img_src}" alt="">
            </div>
            </div>

    `)
}

function addMin(e) {
    $('.main-ul').append(`
                             <li>
                                <a href="./details.html?id=${e.id}">
                                    <img src="${e.img_src}" alt="">
                                    <div>
                                        <p>${e.good_name}</p>
                                        <div>
                                            <p>${e.play_time}</p>
                                            <p>${e.place}</p>
                                            <p>¥${e.price}起</p>
                                        </div>
                                    </div>
                                </a>
                            </li>

    `)

}

function addRight(e) {
    $('.main-right ul').append(`
     <li><a href="./details.html?id=${e.id}"><span>${e.id}</span>${e.good_name}</a></li>     
     `)
}